<template>
    <div>
        <el-card class="top-btn-p">
            <el-button @click="toSelectSchool" type="primary">选择学校</el-button>

            <el-tag closable v-if="schoolName" @close='removeSchool'> {{schoolName}} </el-tag>

            <el-button @click="toSetSchoolNum" type="primary" class="set-sch-num">设置校方的SOS号码</el-button>
        </el-card>

        <el-card>
            <el-form :inline="true"  class="demo-form-inline">
                
                <el-form-item label="年级">
                    <el-select v-model="gradeId" @change="getClassList">
                        <el-option value='' label='全部'></el-option>
                        <el-option
                        v-for="(val, index) in gradeList"
                        :key="index"
                        :label="val.name"
                        :value="val.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班级">
                    <el-select v-model="classId" >
                        <el-option value='' label='全部'></el-option>
                        <el-option
                        v-for="(val, index) in classList"
                        :key="index"
                        :label="val.grade.name + val.name"
                        :value="val.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学生姓名">
                    <el-input v-model="a" placeholder="请输入学生姓名"></el-input>
                </el-form-item>
                <el-form-item label="学生证号">
                    <el-input v-model="a" placeholder="请输入学生证号"></el-input>
                </el-form-item>
                <el-form-item label="电话号码">
                    <el-input v-model="a" placeholder="请输入电话号码"></el-input>
                </el-form-item>
                <el-form-item label="证件号码">
                    <el-input v-model="a" placeholder="请输入证件号码"></el-input>
                </el-form-item>
                <el-form-item label="学生ID">
                    <el-input v-model="a" placeholder="请输入学生ID"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" >查询</el-button>
                </el-form-item>
            </el-form>
            <div class="list-p" >
                    <cvue-table
                      :option="tableOption"
                      :data="tableData"
                      ref="tbl1"
                      :isShowAdd="false"
                      :page="page"
                      :tablePage="page.currentPage"
                      :pageSize="page.pageSize"
                      :loading="tableLoading"
                      @current-change="handleCurrentChange"
                      @size-change="handleSizeChange"
                      :isShowPage="true"
                    >
                      <template slot-scope="scope" slot="operate">
                          <el-button @click="toEdit" type="text">编辑</el-button>
                          <el-button  type="text">解绑</el-button>
                          <el-button @click="toQuery" type="text">查询</el-button>
                      </template>
                    
                    </cvue-table>
            </div>
        </el-card>

        <selectSchool :dialogVisible="selectSchoolVisible"
            @close='selectSchoolVisible = false'
            @confirm='selectSchoolConfirm'
        ></selectSchool>

        <edit :dialogVisible="editVisible" @close='editVisible = false'></edit>
        <query  :dialogVisible="queryVisible" @close='queryVisible = false'></query>
        <setSchoolNum :dialogVisible="setSchoolNumVisible" @close='setSchoolNumVisible = false'></setSchoolNum>
    </div>
</template>
<script>
import cvueTable from '@/components/cvue-table'
import cvueDialog from '@/components/cvue-dialog'
import selectSchool from '@/components/selectSchool' 
import edit from './edit'
import query from './query'
import setSchoolNum from './setSchoolNum'
import {getGradeList, getClassList} from '@/api/schoolApi'
export default {
     components: {
        selectSchool, cvueTable, cvueDialog, edit, query, setSchoolNum
    },
    computed: {
        schoolId () {
            return this.$store.state.common.cookiesObj.schoolId
        },
        schoolName () {
            return this.$store.state.common.cookiesObj.schoolName
        }
    },
    data () {
        return {
            a: '',
            selectSchoolVisible: false,
            editVisible: false,
            queryVisible: false,
            setSchoolNumVisible: false,

            gradeList: [],
            classList: [],
            gradeId: '',
            classId: '',

            tableLoading: false,
            page: {
                total: 0, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 10, // 每页显示多少条
                pageSizes: [10, 20, 30, 40, 50]
            },
            tableOption: {
                stripe: false,
                width: '100%',
                border: true,
                index: false,
                cloumn: [
                    { prop: 'a', label: '登录名称', align: 'center' },
                    { prop: 'a', label: '学校名称', align: 'center' },
                    { prop: 'a', label: '学生姓名', align: 'center' },
                    { prop: 'a', label: '年级', align: 'center' },
                    { prop: 'a', label: '班级', align: 'center' },
                    { prop: 'a', label: '学籍状态', align: 'center' },
                    { prop: 'a', label: '学生证号', align: 'center' },
                    { prop: 'a', label: '亲情号码', align: 'center' },
                    { prop: 'a', label: '卡状态', align: 'center' },
                    { prop: 'a', label: '制卡照片', align: 'center' },
                    { prop: 'operate', label: '操作', align: 'center', slotStatus: true }
                ]
            },
            tableData: [{a: 1}]
        }
    },
    methods: {
        toSelectSchool () {
            this.selectSchoolVisible = true
        },
        removeSchool () {
            delete this.$store.state.common.cookiesObj.schoolId
            delete this.$store.state.common.cookiesObj.schoolName
            this.$store.state.common.cookiesObj = JSON.parse(JSON.stringify(this.$store.state.common.cookiesObj))

            this.gradeList = []
            this.classList = []
            this.gradeId = ''
            this.classId = ''
        },
        selectSchoolConfirm () {
            this.getGradeList()
        },
        // 改变pagesize
        handleSizeChange (val) {
            this.page.pageSize = val
            this.getList()
        },
        // 改变页码
        handleCurrentChange (val) {
            this.page.currentPage = val
            this.getList()
        },
        getList () {

        },
        toEdit () {
            this.editVisible = true
        },
        toQuery () {
            this.queryVisible = true
        },
        toSetSchoolNum () {
            this.setSchoolNumVisible = true
        },
        getGradeList () {
            if (!this.schoolId) {
                return
            }
            getGradeList({
                schoolId: this.schoolId,
                PageNum: 1,
                PageSize: 100,
                Sorting: 'orderNum'
            }).then(res => {
                this.gradeList = res.items
            })
        },
        getClassList (gradeId) {
            if (!this.schoolId) {
                return
            }
            var params = {
                schoolId: this.schoolId,
                PageNum: 1,
                PageSize: 100,
                Sorting: 'orderNum'
            }
            if (gradeId) {
                params.GradeId = gradeId
            }
            getClassList(params).then(res => {
                this.classList = res.items
            })
        }
    }
}
</script>
<style scoped>
.list-p{
    padding: 10px 0 0 0;
}
.top-btn-p{
    margin: 0 0 10px 0;
    position: relative;
}
.set-sch-num{
    position: absolute;left: 500px;
}
</style>
